

<template>
  <view class="Mall4j container">
    <!-- 搜索框 -->
    <view class="fixed-box">
      <view class="search-bar">
        <view class="search-box">
          <input class="sear-input" :value="prodName" confirm-type="search" @input="getSearchContent" @confirm="toSearchConfirm">
          <image mode="aspectFill" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/search.png" class="search-img" />
        </view>
        <view class="search-list-img" @tap="changeShowType">
          <image mode="aspectFill" v-if="showType==1" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/search-col.png" />
          <image mode="aspectFill" v-if="showType==2" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/search-col2.png" />
        </view>
      </view>
      <view class="tabs">
        <!-- <text :class="'tab-item complete ' + (sts==0?'on':'')" @tap="onStsTap" data-sts="0">{{i18n.Comprehensive}}</text>
        <text :class="'tab-item ' + (sts==1?'on':'')" @tap="onStsTap" data-sts="1">{{i18n.sales}}</text>
        <text :class="'tab-item ' + (sts==2?'on':'')" @tap="onStsTap" data-sts="2">{{i18n.price}}</text> -->
        <view :class="(curLang=='en'? 'en ': '') + 'tab-item ' + (sts == 0 && (orderBy==1?'down':'up'))" data-sts="0" @tap="onStsTap">{{ i18n.Comprehensive }}</view>
        <view :class="'tab-item ' + (sts==1 && (orderBy==1?'down':'up'))" data-sts="1" @tap="onStsTap">{{ i18n.sales }}</view>
        <view :class="'tab-item ' + (sts==2 && (orderBy==1?'down':'up'))" data-sts="2" @tap="onStsTap">{{ i18n.price }}</view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="prod-list">
      <view class="list_view"></view>
      <view v-if="showType == 1" class="prod-show">
        <view class="hotsale-item-cont">
          <jp-falls class="falls" :routesList="searchProdList">
            <template #left={left}>
              <view v-for="(item, index) in left" :key="item.prodId">
                <prod :item="item" sts="6" :show-sold-num="sts==1" />
              </view>
            </template>
            <template #right={right}>
              <view v-for="(item, index) in right" :key="item.prodId">
                <prod :item="item" sts="6" :show-sold-num="sts==1" />
              </view>
            </template>
          </jp-falls>
        </view>
      </view>

      <!-- 纵向列表 -->
      <view v-if="showType==2" class="cont-item">
        <block v-for="(item, index) in searchProdList" :key="index">
          <view class="show-item" @tap="toProdPage(item.prodId)">
            <view class="more-prod-pic">
              <image mode="aspectFill" v-if="item.pic" :src="item.pic" class="more-pic" />
              <image mode="aspectFill" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" class="more-pic" />
            </view>
            <view class="prod-text-right">
              <view class="prod-text more">{{ item.prodName }}</view>
              <view class="cate-prod-info">{{ item.prodCommNumber }}{{ i18n.evaluation }} {{ item.positiveRating }}%{{ i18n.praise }}</view>
              <view class="prod-price more">
                <view class="price-con">
                  <text class="symbol">￥</text>
                  <text class="big-num font_weight_6">{{ item.price_1 }}</text>
                  <text class="small-num">.{{ item.price_2 }}</text>
                  <text class="cate-prod-info sold-num">{{ i18n.sold }} {{ item.totalSoldNum }}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>

      <!-- 加载完毕 -->
      <view v-if="loadAll && searchProdList.length" class="all-load">{{ i18n.endTips }}</view>

      <!-- 空提示 -->
      <empty-tips v-if="searchProdList.length==0" />
    </view>

    <!-- 回到顶部 -->
    <back-top-btn v-if="showBacktop" />
  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
// pages/search-prod-show/search-prod-show.js
const http = require("../../utils/http.js")
import prod from "../../components/production/index.vue"
import emptyTips from "../../components/empty-tips/index.vue"
import backTopBtn from "../../components/back-top-btn/index.vue"

export default {
  data () {
    return {
      sts: 0,
      showType: 2,
      searchProdList: [],
      prodName: "",
      pages: 0,
      current: 1,
      size: 10,
      loadAll: false,  // 是否加载完成
      orderBy: 1, // 排序(0升序 1降序)
      curLang: 'en',
      scrollTop: "",
      showBacktop: false
    };
  },

  components: {
    prod,
    emptyTips,
    backTopBtn
  },
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      prodName: decodeURI(options.prodName),
      curLang: uni.getStorageSync('lang')
    });
    this.toLoadData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 设置头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.searchResult
    });

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.setData({
        current: this.current + 1
      });
      this.toLoadData();
    } else {
      this.loadAll = true
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    // 页面滚动到指定位置指定元素固定在顶部
    onPageScroll: function (e) {
      this.scrollTop = e.scrollTop
      if (this.scrollTop > 200) {
        this.setData({
          showBacktop: true
        })
      } else if (this.scrollTop < 200) {
        this.setData({
          showBacktop: false
        })
      }
    },

    changeShowType: function () {
      var showType = this.showType;

      if (showType == 1) {
        showType = 2;
      } else {
        showType = 1;
      }

      this.setData({
        showType: showType
      });
    },
    //输入商品获取数据
    getSearchContent: function (e) {
      this.setData({
        prodName: e.detail.value
      });
    },
    //请求商品接口
    toLoadData: function () {
      var ths = this
      //热门搜索
      var params = {
        url: "/search/searchProdPage",
        method: "GET",
        data: {
          current: this.current,
          prodName: this.prodName,
          size: this.size,
          sort: this.sts,
          orderBy: this.orderBy,
          isAllProdType: true
        },
        callBack: res => {
          var list = [];
          if (this.current == 1) {
            console.log('2222222222222211');

            this.searchProdList = []
            list = res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            });
          } else {
            list = this.searchProdList.concat(res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }
            }));
          }
          this.setData({
            searchProdList: list,
            pages: res.pages
          });
          if (res.pages == 1) {
            ths.setData({
              loadAll: true
            })
          }
        }
      };
      http.request(params);
    },
    //当前搜索页二次搜索商品
    toSearchConfirm: function (e) {
      if (e.detail.value) {
        let recentSearch = uni.getStorageSync('recentSearch') || [];
        recentSearch = recentSearch.filter(item => item !== this.prodName);
        recentSearch.unshift(this.prodName);
        if (recentSearch.length > 10) {
          recentSearch.pop();
        }
        uni.setStorageSync('recentSearch', recentSearch);
      }
      uni.redirectTo({
        url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value
      })
    },

    /**
    * 状态点击事件
    */
    onStsTap: function (e) {
      console.log(e, '2222222222222');
      this.searchProdList = []
      var sts = e.currentTarget.dataset.sts;
      this.orderBy = this.sts == sts ? this.orderBy == 0 ? 1 : 0 : this.orderBy
      this.setData({
        sts: sts,
        current: 1,
        pages: 1
      });
      this.toLoadData();
    },

    /**
     * 跳转商品详情
     */
    toProdPage (prodId) {
      this.$Router.push({ path: '/pages/prod/prod', query: { prodid: prodId } })
    }
  }
};
</script>
<style scoped lang='scss'>
@import "./search-prod-show.scss";
</style>
